<template>
  <div class="wrap">
    <div class="head">
      <div class="tx">
        <van-image
          round
          width="5rem"
          height="5rem"
          :src="userCover?userCover:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
        />

        
      </div>
      <div style="padding-top: 5px;">
      <h3
        style="display: inline-block; position: relative; top: 25px; left: 25vw"
      >
        {{ userName }}  {{ userPhone }}
      </h3>
      <p style="position: absolute; top: 53px; left: 25vw">
        学车阶段<span style="color: red">未报名</span>
      </p>
      </div>
      <div
        style="position: absolute; top: 35px; right: 1vw"
        @click="$router.push('/news')"
      >
        <van-icon style="font-size: 35px" name="chat-o" />
      </div>
    </div>
    <div class="head1">
      <ul class="bg">
        <li>
          <p class="text">VIP快速过理论</p>
          <div class="text1">
            <button
              style="
                background-color: #eb7954;
                width: 28vw;
                height: 3vh;
                border: none;
                border-radius: 23px;
                color: #fff;
              "
            >
              <label for="">不过补偿></label>
            </button>
          </div>
        </li>
        <li>
          <p class="text">理论速成卡</p>
          <div class="text1">
            <button
              style="
                background-color: #60b89f;
                width: 28vw;
                height: 3vh;
                border: none;
                border-radius: 23px;
                color: #fff;
              "
            >
              <label for="">立即领取></label>
            </button>
          </div>
        </li>
      </ul>
    </div>
    <div style="margin: auto 3vw">
      <van-tabs v-model:active="active" type="card">
        <van-tab title="科目一">
          <div id="M">
            <div id="M-x">
              <span class="S1">{{ lian[0].num }}</span>
              <p>累积答题数</p>
              <span class="S2"
                >正确率<span>{{ lian[0].ratio }}%</span></span
              >
            </div>
            <div id="M-x">
              <span class="S1">{{ kao[0].avg }}</span>
              <p>模拟考试平均分</p>
              <span class="S2"
                >累积考试<span>{{ kao[0].count }}次</span></span
              >
            </div>
          </div>
        </van-tab>
        <van-tab title="科目二">
          <div id="M">
            <div id="M-x">
              <span class="S1" style="color: #478afc">--</span>
              <p>已掌握项目</p>
              <span class="S2">熟练度<span>0%</span></span>
            </div>
            <div id="M-x">
              <span class="S1" style="color: #478afc">--</span>
              <p>模拟考试</p>
              <span class="S2">当前熟练度</span>
            </div>
          </div>
        </van-tab>
        <van-tab title="科目三">
          <div id="M">
            <div id="M-x">
              <span class="S1" style="color: #478afc">--</span>
              <p>已掌握项目</p>
              <span class="S2">熟练度<span>0%</span></span>
            </div>
            <div id="M-x">
              <span class="S1" style="color: #478afc">--</span>
              <p>模拟考试</p>
              <span class="S2">当前熟练度</span>
            </div>
          </div>
        </van-tab>
        <van-tab title="科目四">
          <div id="M">
            <div id="M-x">
              <span class="S1">{{ lian[1].num }}</span>
              <p>累积答题数</p>
              <span class="S2"
                >正确率<span>{{ lian[1].ratio }}%</span></span
              >
            </div>
            <div id="M-x">
              <span class="S1">{{ kao[1].avg }}</span>
              <p>模拟考试平均分</p>
              <span class="S2"
                >累积考试<span>{{ kao[1].count }}次</span></span
              >
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <van-grid style="border-bottom: 5px solid #f7f7f7">
      <van-grid-item
        icon="chart-trending-o"
        icon-color="#E5713B"
        text="成绩排行"
      />
      <van-grid-item icon="exchange" icon-color="#39F2B9" text="同步数据" />
      <van-grid-item icon="replay" icon-color="#A095F0" text="题库更新" />
      <van-grid-item icon="manager-o" icon-color="#CB79EA" text="陪练服务" />
      <van-grid-item
        icon="goods-collect-o"
        icon-color="#71CB95"
        text="错题收藏"
      />
      <van-grid-item icon="eye-o" icon-color="#5AC4F7" text="浏览记录" />
      <van-grid-item icon="records" icon-color="#E5E546" text="三力测试" />
      <van-grid-item icon="shield-o" icon-color="#2E7EE5" text="安全中心" />
    </van-grid>
    <div>
      <van-grid>
        <van-grid-item icon="user-o" icon-color="red" text="绑定教练" />
        <van-grid-item icon="comment-o" icon-color="#9331E0" text="我的评价" />
        <van-grid-item
          icon="location-o"
          icon-color="#0AD3A5"
          text="地图学车"
          @click="$router.push('/cartMap')"
        />
        <van-grid-item icon="records" icon-color="#E879D3" text="在线约课" />
      </van-grid>
    </div>
    <div style="margin: 1.5vh 5vw 0vh 5vw">
      <van-cell
        @click="$router.push('/MeNext')"
        title="个人信息"
        is-link
        style="border-bottom: 5px solid #ffffff"
      />
      <van-cell
        title="帮助与反馈"
        is-link
        style="border-bottom: 5px solid #ffffff"
      />
      <van-cell
        title="我的订阅"
        is-link
        style="border-bottom: 5px solid #ffffff"
      />
      <van-cell
        title="我的优惠券"
        is-link
        style="border-bottom: 5px solid #ffffff"
      />
      <van-cell
        title="我的订单"
        is-link
        style="border-bottom: 5px solid #ffffff"
      />
      <van-cell
        title="设置"
        style="border-bottom: 5px solid #ffffff"
        is-link
        @click="$router.push('/Setup')"
      />
    </div>
    <div
      style="
        margin-bottom: 10vh;
        text-align: center;
        border-bottom: 1px dashed black;
      "
    >
      <span style="font-weight: bold">找驾校,靠驾照,就用驾考通</span>
      <van-cell
        title="分享给朋友"
        @click="showShare = true"
        font-size="0.5em"
      />
      <van-share-sheet
        v-model:show="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
        round
        icon="arrow"
      />
    </div>
    <van-cell v-for="item in list" :key="item" :title="item" />
    <van-back-top right="10vw" bottom="15vh" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { showToast } from "vant";
import { useStore } from "vuex";
import httpApi from "@/http";


const store = useStore();
const userName = store.state.user.user_name;
const userPhone = store.state.user.user_phone;
const userCover = store.state.user.user_cover;

const lian = reactive([
  { subject: "科目一", num: 0, ratio: 0 },
  { subject: "科目四", num: 0, ratio: 0 },
]);
const kao = reactive([
  { subject: "科目一", count: 0, avg: 0 },
  { subject: "科目四", count: 0, avg: 0 },
]);
onMounted(() => {
  let userId = store.state.user.user_id;
  let done_subj = "";
  for (let i = 0; i < lian.length; i++) {
    done_subj = lian[i].subject;

    httpApi.doneApi.queryByUserA({ userId, done_subj }).then((res) => {
      // console.log('已激活题',res)
      let ok = 0;
      res.data.data.forEach((item, index) => {
        if (item.done_state) {
          lian[i].num += 1;
          if (item.done_state == 1) {
            ok = ok + 1;
          }
        }
      });
      // console.log(ok);
      let x = (ok / lian[i].num) * 100 || 0;
      if (lian[i].num == 0) {
        lian[i].ratio = 0;
      } else if ((ok * 100) % lian[i].num < lian[i].num * 0.005) {
        lian[i].ratio = Math.floor((ok * 100) / lian[i].num);
      } else if ((ok * 1000) % lian[i].num < lian[i].num * 0.05) {
        lian[i].ratio = x.toFixed(1);
      } else {
        lian[i].ratio = x.toFixed(2);
      }
      // console.log("正确率", x);
      // console.log("百分比", lian[i].ratio);
    });
  }
  // console.log(lian);

  let grade_subj = "";
  for (let i = 0; i < kao.length; i++) {
    grade_subj = kao[i].subject;

    httpApi.gradesApi.queryByUser({ userId, grade_subj }).then((res) => {
      // console.log("查询成绩", res);
      let arr = res.data.data;
      kao[i].count = arr.length;

      let sum = 0;
      for (let j = 0; j < arr.length; j++) {
        sum = sum + arr[j].grade_num;
      }
      let x = sum / kao[i].count || 0;
      if (kao[i].count == 0) {
        kao[i].avg = 0;
      } else if (sum % kao[i].count < kao[i].count * 0.005) {
        kao[i].avg = Math.floor(sum / kao[i].count);
      } else if ((sum * 10) % kao[i].count < kao[i].count * 0.05) {
        kao[i].avg = x.toFixed(1);
      } else {
        kao[i].avg = x.toFixed(2);
      }
      // console.log(x);
      // console.log(kao[i].avg);
    });
  }
  // console.log(kao);
});

const showShare = ref(false);
const options = [
  { name: "微信", icon: "wechat" },
  { name: "朋友圈", icon: "wechat-moments" },
  { name: "微博", icon: "weibo" },
  { name: "QQ", icon: "qq" },
];

const onSelect = (option) => {
  showToast(option.name);
  showShare.value = false;
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#M {
  width: 90%;
  display: flex;
  margin: 2vh auto;
  border-radius: 5px;
  justify-content: space-between;
  background-color: #ade8f5;
}

#M-x {
  margin: 2vh auto;
}

#M p {
  font-size: 1em;
}

#M .S1 {
  margin-top: 3vh;
  font-size: 1.2em;
  font-weight: bold;
}

#M .S2 span {
  color: red;
}

#M-a {
  margin-left: 3.5vw;
  display: flaxd;
}

#M div {
  width: 50%;
  border-radius: 15px;
  text-align: center;
}

.text {
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
  margin: 15px;
}

.text1 {
  font-size: 0.8em;
  text-align: center;
  margin: 1vh auto;
}

.bg {
  width: 90%;
  height: 80%;
  display: flex;
  position: relative;
  margin: auto;
  padding-bottom: 10px;
  justify-content: space-between;
}

.bg li {
  width: 49%;
  background-color: #f7eae4;
  border-radius: 15px;
  position: relative;
}

.bg li:nth-child(2) {
  background-color: #c1e8e4;
}

.tx {
  width: 5vw;
  position: absolute;
  top: 2.5vh;
  left: 3vw;
}

.head {
  width: 90%;
  margin-left: 5%;
  position: relative;
  height: 16vh;
}
</style>
